<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
<head>
<title>Widgets in Java Gnome</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, Java Gnome, Widgets, Java, programming, Linux">
<meta name="description" content="Widgets in Java Gnome">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Widgets in Java Gnome</h1>

<p>
In this part of the Java Gnome programming tutorial, we will introduce some widgets.
</p>

<div class="center">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-9706709751191532";
/* top_horizontal */
google_ad_slot = "3327173442";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<p>
Widgets are basic building blocks of a GUI application. 
Over the years, several widgets became a standard in all toolkits on all OS platforms.
For example a button, a check box or a scroll bar. The GTK+ toolkit's philosophy is
to keep the number of widgets at a minimum level. More specialized 
widgets are created as custom widgets.  
</p>


<h2>Label</h2>

<p>
The <b class="keyword">Label</b> widget shows text. 
</p>


<div class="codehead">label.java</div> 
<pre class="code">
package com.zetcode;

import org.gnome.gdk.Event;
import org.gnome.gtk.Gtk;
import org.gnome.gtk.Label;
import org.gnome.gtk.Widget;
import org.gnome.gtk.Window;
import org.gnome.gtk.WindowPosition;

/**
 * ZetCode Java Gnome tutorial
 *
 * This program uses Label widget
 * to display text. 
 *
 * @author jan bodnar
 * website zetcode.com
 * last modified March 2009
 */

public class GLabel extends Window {


    public GLabel() {
    
        setTitle("Death song");

        initUI();

        connect(new Window.DeleteEvent() {
            public boolean onDeleteEvent(Widget source, Event event) {
                Gtk.mainQuit();
                return false;
            }
        });
        
        setPosition(WindowPosition.CENTER);
        showAll();
    }
    
    public void initUI() {

        Label lyrics = new Label("Lets sing the death song kids\n\n" +
        "We light a candle on an earth\n" +
        "We made into hell\n" +
        "And pretend that were in heaven\n" +
        "Each time we do we get\n" +
        "The blind mans ticket\n" +
        "And we know that nothings true\n" +
        "I saw priest kill a cop on the tv\n" +
        "And I know now theyre our heroes too\n\n" +

        "We sing the death song kids\n" +
        "Because weve got no future\n" +
        "And we want to be just like you\n" +
        "And we want to be just like you\n");
        
        add(lyrics);  
        
        setBorderWidth(8);
    }
    
    public static void main(String[] args) {
        Gtk.init(args);
        new GLabel();
        Gtk.main();
    }
}
</pre>

<p>
The code example shows some lyrics on the window. 
</p>

<pre class="explanation">
 Label lyrics = new Label("Lets sing the death song kids\n\n" +
 "We light a candle on an earth\n" +
 ...
</pre>

<p>
This is the text we will display in the Label widget. 
</p>

<pre class="explanation">
 setBorderWidth(8);
</pre>

<p>
The <b class="keyword">Label</b> is surrounded by some empty space. 
</p>


<br>
<img src="/img/gui/javagnome/label.png" alt="Label Widget">
<div class="figure">Figure: Label Widget</div>
<br>

<h2>HSeparator</h2>

<p>
<b class="keyword">HSeparator</b> is an ornament widget, 
which can be used to separate items on the window. 
</p>

<div class="codehead">separator.java</div> 
<pre class="code">
package com.zetcode;

import org.gnome.gdk.Event;
import org.gnome.gtk.Gtk;
import org.gnome.gtk.HSeparator;
import org.gnome.gtk.Label;
import org.gnome.gtk.VBox;
import org.gnome.gtk.Widget;
import org.gnome.gtk.Window;
import org.gnome.gtk.WindowPosition;

/**
 * Java Gnome tutorial
 *
 * This program shows how to use
 * a horizontal separator.
 *
 * @author jan bodnar
 * website zetcode.com
 * last modified March 2009
 */


public class GHSeparator extends Window {

    private final int VERTICAL_SPACE = 15;
    private final int BORDER_AROUND = 25;
    private final float Y_ALIGN = 0f;
    private final float X_ALIGN = 0f;

    public GHSeparator() {
    
        setTitle("HSeparator");
        
        initUI();
        
        connect(new Window.DeleteEvent() {
            public boolean onDeleteEvent(Widget source, Event event) {
                Gtk.mainQuit();
                return false;
            }
        });
        
        setPosition(WindowPosition.CENTER);
        showAll();
        
    }    
    
    public void initUI() {
       
        VBox vbox = new VBox(false, VERTICAL_SPACE);
        
        Label zinc = new Label("Zinc is a moderately reactive, blue" +
        "gray metal that tarnishes in moist air and burns in air of zinc " +
        "oxide. It reacts with acids, alkalis and other non-metals. If not" +
        "completely pure, zinc reacts with dilute acids to release hydrogen.");

        zinc.setLineWrap(true);
        zinc.setAlignment(X_ALIGN, Y_ALIGN);

        vbox.packStart(zinc);
        
        HSeparator hsep = new HSeparator();
        vbox.packStart(hsep);
        
        Label copper = new Label("Copper is an essential trace nutrient to" +
        "all high plants and animals. In animals, including humans," +
        "it is found primarily in the bloodstream, as a co-factor in various" +
        "enzymes, and in copper-based pigments. However, in sufficient" +
        "amounts, copper can be poisonous and even fatal to organisms.");
        
        copper.setAlignment(X_ALIGN, Y_ALIGN);
        copper.setLineWrap(true);

        vbox.packStart(copper);
        add(vbox);
        
        setResizable(false);
        setBorderWidth(BORDER_AROUND);
    }
    

    public static void main(String[] args) {
        Gtk.init(args);
        new GHSeparator();
        Gtk.main();
    }
}
</pre>

<p>
In our code example, we have descriptions of two 
chemical elements, which are separated by the
horizontal separator. 
</p>

<pre class="explanation">
 zinc.setLineWrap(true);
</pre>

<p>
This line wraps the text. This is necessary
for longer texts. 
</p>

<pre class="explanation">
 zinc.setAlignment(X_ALIGN, Y_ALIGN);
</pre>

<p>
This code line aligns the text to the left. 
</p>

<pre class="explanation">
 HSeparator hsep = new HSeparator();
 vbox.packStart(hsep);
</pre>

<p>
The <b class="keyword">HSeparator</b> widget is created
and placed in between the two label widgets. 
</p>

<br>
<img src="/img/gui/javagnome/separator.png" alt="HSe">
<div class="figure">Figure: HSeparator</div>
<br>


<h2>CheckButton</h2>

<p>
<b class="keyword">CheckButton</b> is a widget, that has two states. On and Off. 
The On state is visualised by a check mark. It is used to denote some boolean
property.
</p>

<div class="codehead">checkbutton.java</div> 
<pre class="code">
package com.zetcode;

import org.gnome.gdk.Event;
import org.gnome.gtk.CheckButton;
import org.gnome.gtk.Fixed;
import org.gnome.gtk.Gtk;
import org.gnome.gtk.ToggleButton;
import org.gnome.gtk.Widget;
import org.gnome.gtk.Window;
import org.gnome.gtk.WindowPosition;

/**
 * ZetCode Java Gnome tutorial
 *
 * This program uses a CheckButton to 
 * toggle the visibility of a window title.
 *
 * @author jan bodnar
 * website zetcode.com
 * last modified March 2009
 */


public class GCheckButton extends Window implements ToggleButton.Toggled {

    CheckButton check;
    Window window;
    private String title = "Check Button";

    public GCheckButton() {
    
        setTitle(title);

        initUI();
        
        connect(new Window.DeleteEvent() {
            public boolean onDeleteEvent(Widget source, Event event) {
                Gtk.mainQuit();
                return false;
            }
        });
        
        setSizeRequest(250, 200);
        showAll();
    }
    

    public void initUI() {
    
        setBorderWidth(10);
        
        Fixed fixed = new Fixed();
        
        check = new CheckButton("Show title");
        check.setActive(true);
        check.connect(this);
        
        check.setCanFocus(false);

        fixed.put(check, 50, 50);
        
        add(fixed);
        setPosition(WindowPosition.CENTER);
    }
    
    public void onToggled(ToggleButton toggleButton) {
            if (check.getActive()) {
                setTitle(title);
            } else {
                setTitle("");
            }
    }
    
    public static void main(String[] args) {
    
        Gtk.init(args);
        new GCheckButton();
        Gtk.main();
        
    }   
}
</pre>

<p>
We will display a title in the titlebar of the window,
depending on the state of the <b class="keyword">CheckButton</b>. 
</p>

<pre class="explanation">
 check = new CheckButton("Show title");
</pre>

<p>
<b class="keyword">CheckButton</b> widget is created. 
</p>

<pre class="explanation">
 check.setActive(true);
</pre>

<p>
The title is visible by default, so we check the check button by default. 
</p>

<pre class="explanation">
 if (check.getActive()) {
     setTitle(title);
 } else {
     setTitle("");
 }
</pre>

<p>
Depending on the state of the 
<b class="keyword">CheckButton</b>, we show or hide the title
of the window. 
</p>


<br>
<img src="/img/gui/javagnome/checkbutton.png" alt="CheckButton">
<div class="figure">Figure: CheckButton</div>
<br>

<h2>TextComboBox</h2>

<p>
<b class="keyword">TextComboBox</b> is a widget that allows the user to choose
from a list of textual options.
</p>

<div class="codehead">textcombobox.java</div>
<pre class="code">
package com.zetcode;

import org.gnome.gdk.Event;
import org.gnome.gtk.ComboBox;
import org.gnome.gtk.Fixed;
import org.gnome.gtk.Gtk;
import org.gnome.gtk.Label;
import org.gnome.gtk.TextComboBox;
import org.gnome.gtk.Widget;
import org.gnome.gtk.Window;
import org.gnome.gtk.WindowPosition;


/**
 * ZetCode Java Gnome tutorial
 *
 * This program shows how to use
 * a TextComboBox.
 *
 * @author jan bodnar
 * website zetcode.com
 * last modified March 2009
 */

public class GTextComboBox extends Window implements ComboBox.Changed {

    TextComboBox cb;
    Label label;


    public GTextComboBox() {
    
        setTitle("TextComboBox");
        
        initUI();
        
        setSizeRequest(250, 200);
        setPosition(WindowPosition.CENTER);
        showAll();
    }
        
        
    public void initUI() {
        
        connect(new Window.DeleteEvent() {
            public boolean onDeleteEvent(Widget source, Event event) {
                Gtk.mainQuit();
                return false;
            }
        });
        
        Fixed fixed = new Fixed();
        
        label = new Label("");
        fixed.put(label, 55, 130);
                
        cb = new TextComboBox();
        
        cb.appendText("Ubuntu");
        cb.appendText("Mandriva");
        cb.appendText("Fedora");
        cb.appendText("Mint");
        cb.appendText("Debian");
        cb.appendText("Gentoo");
        
        cb.connect(this);
        
        fixed.put(cb, 50, 50);
        
        add(fixed);
    }
        
    public void onChanged(ComboBox comboBox) {
        String text = cb.getActiveText();
        label.setLabel(text);
    }
    
    public static void main(String[] args) {
        Gtk.init(args);
        new GTextComboBox();
        Gtk.main();
    }
}
</pre>

<p>
The example shows a text combo box and a label. The text combo box has a 
list of six options. These are the names of Linux Distros. The label widget 
shows the selected option from the text combo box. 
</p>

<pre class="explanation">
 cb = new TextComboBox();
</pre>

<p>
The <b class="keyword">TextComboBox</b> widget is created. 
</p>

<pre class="explanation">
 cb.appendText("Ubuntu");
</pre>

<p>
The <b class="keyword">appendText()</b> method is called to fill
the text combo box.  
</p>

<pre class="explanation">
 public void onChanged(ComboBox comboBox) {
     String text = cb.getActiveText();
     label.setLabel(text);
 }
</pre>

<p>
The <b class="keyword">onChanged()</b> method is called,
when we select an option from the text combo box. 
We get the selected text and set it to the label widget. 
</p>


<br>
<img src="/img/gui/javagnome/textcombobox.png" alt="TextComboBox">
<div class="figure">Figure: TextComboBox</div>
<br>


<h2>Image</h2>

<p>
The next example introduces the <b class="keyword">Image</b> widget.
This widget displays pictures. 
</p>

<div class="codehead">image.java</div>
<pre class="code">
package com.zetcode;

import org.gnome.gdk.Event;
import org.gnome.gtk.Gtk;
import org.gnome.gtk.Image;
import org.gnome.gtk.Widget;
import org.gnome.gtk.Window;
import org.gnome.gtk.WindowPosition;

/**
 * ZetCode Java Gnome tutorial
 *
 * This program shows an image of a castle
 * in the window.
 *
 * @author jan bodnar
 * website zetcode.com
 * last modified March 2009
 */


public class GImage extends Window {
    public GImage() {
    
        setTitle("Red Rock");
        
        initUI();
     
        setPosition(WindowPosition.CENTER);
        showAll();
    }
    
    
    public void initUI() {
    
        connect(new Window.DeleteEvent() {
            public boolean onDeleteEvent(Widget source, Event event) {
                Gtk.mainQuit();
                return false;
            }
        });
        
        Image image = new Image("redrock.png");
        
        int width = image.getRequisition().getWidth();
        int height = image.getRequisition().getHeight();
        setSizeRequest(width, height);
        
        add(image);
        setBorderWidth(2);
    }
 
    public static void main(String[] args) {
        Gtk.init(args);
        new GImage();
        Gtk.main();
    }
}
</pre>

<p>
We show the Red Rock castle in the window. 
</p>

<pre class="explanation">
 Image image = new Image("redrock.png");
</pre>

<p>
We create an instance of the <b class="keyword">Image</b> widget. 
Notice, that we do not catch for any exceptions. The Image widget
already handles them. If the Image widget cannot find the
redrock.png image, it will display a missing image by default. 
</p>

<pre class="explanation">
 Image image = new Image(castle);
 Add(image);
</pre>

<p>
<b class="keyword">Image</b> widget is created and added to the window. 
</p>


<br>
<img src="/img/gui/javagnome/redrock.jpg" alt="Image">
<div class="figure">Figure: Image</div>
<br>

<hr class="btm">

<p>
In this chapter, we showed the first pack of basic widgets of the
Java Gnome programming library. 
</p>

<br>
<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 
<br>


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified March 12, 2009  <span class="copyright">&copy; 2007 - 2012 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>
